feat(FR-1572): improve keyboard interaction and focus management for editable name components #4421

yomybaby · 2025-10-21T03:16:12Z

Summary

This PR improves keyboard interaction and focus management for editable name components in the session detail drawer and folder explorer modal.

Changes

Added focus management using useRef and focus fallback functions to EditableFileName, EditableSessionName, and EditableVFolderName components
Implemented event.stopPropagation() for ESC key during editing to prevent modal closing
Added proper tabIndex and focus handling after editing completes
Enabled keyboard modal closing (keyboard prop) for FolderExplorer modal
Added 'use memo' directive for React compiler optimization

Technical Details

When editing name fields, ESC key now cancels editing without closing the parent modal/drawer
After editing completes (either by confirmation or cancellation), focus returns to the text element with proper tabIndex
This ensures ESC key can properly close modals when not in editing mode
All editable name components now have consistent keyboard interaction behavior

Testing

Test editing names in session detail drawer - ESC should cancel editing without closing drawer
Test editing names in folder explorer modal - ESC should cancel editing without closing modal
After editing, ESC should properly close the modal/drawer
Verify focus management works correctly when switching between editing and view modes

yomybaby · 2025-10-21T03:16:30Z

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

flow:merge-queue - adds this PR to the back of the merge queue
flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has required the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2025-10-21T03:17:59Z

Coverage report for `./packages/backend.ai-ui`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	51.38%	130/253
🔴	Branches	30.3%	80/264
🔴	Functions	34.48%	20/58
🔴	Lines	53.85%	119/221

Test suite run success

55 tests passing in 3 suites.

Report generated by 🧪jest coverage report action from f4e515a

github-actions · 2025-10-21T03:18:41Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	4.65%	532/11446
🔴	Branches	3.76%	302/8030
🔴	Functions	2.87%	102/3548
🔴	Lines	4.6%	514/11186

Test suite run success

121 tests passing in 14 suites.

Report generated by 🧪jest coverage report action from f4e515a

Copilot

Pull Request Overview

This PR improves keyboard interaction and focus management for editable name components to prevent modals from closing when ESC is pressed during name editing.

Adds focus management with useRef to return focus after editing completes
Implements ESC key event propagation stopping during editing to prevent unintended modal closure
Enables keyboard-based modal closing for FolderExplorer when not in editing mode

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
react/src/components/FolderExplorer.tsx	Enables keyboard prop to allow ESC key to close modal when not editing
react/src/components/EditableVFolderName.tsx	Adds focus management, ESC propagation stopping, and React compiler directive
react/src/components/ComputeSessionNodeItems/EditableSessionName.tsx	Adds focus management, ESC propagation stopping, and React compiler directive
packages/backend.ai-ui/src/components/baiClient/FileExplorer/EditableFileName.tsx	Adds focus management, ESC propagation stopping, and React compiler directive

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

agatha197

It's good as it is now, but couldn’t we create a hook to reduce duplicate code?

import { useRef, useCallback } from 'react';

export function useEditableFocusManagement<T extends HTMLElement = HTMLElement>() {
  const textRef = useRef<T>(null);

  const focusFallback = useCallback(() => {
    setTimeout(() => {
      textRef.current?.focus();
    }, 0);
  }, []);

  const createEscapeHandler = useCallback((
    onEscape: () => void
  ) => {
    return (e: React.KeyboardEvent) => {
      if (e.key === 'Escape') {
        e.stopPropagation();
        onEscape();
      }
    };
  }, []);

  return {
    textRef,
    focusFallback,
    createEscapeHandler,
    textProps: {
      ref: textRef,
      tabIndex: -1 as const,
      style: { outline: 'none' } as const,
    },
  };
}

const { focusFallback, createEscapeHandler, textProps } = 
  useEditableFocusManagement<HTMLSpanElement>();

<Component {...textProps} />

<Input 
  onKeyDown={createEscapeHandler(() => {
    setIsEditing(false);
    focusFallback();
  })} 
/>

ironAiken2

I left some comments. Also, please resolve the conflicts :)

react/src/components/ComputeSessionNodeItems/EditableSessionName.tsx

agatha197

LGTM

ironAiken2

LGTM

agatha197

LGTM

graphite-app · 2025-10-28T04:17:39Z

Merge activity

Oct 28, 4:17 AM UTC: yomybaby added this pull request to the Graphite merge queue.
Oct 28, 4:19 AM UTC: Merged by the Graphite merge queue.

…editable name components (#4421) Resolves #4420 ([FR-1572](https://lablup.atlassian.net/browse/FR-1572)) ## Summary This PR improves keyboard interaction and focus management for editable name components in the session detail drawer and folder explorer modal. ## Changes - Added focus management using useRef and focus fallback functions to EditableFileName, EditableSessionName, and EditableVFolderName components - Implemented event.stopPropagation() for ESC key during editing to prevent modal closing - Added proper tabIndex and focus handling after editing completes - Enabled keyboard modal closing (keyboard prop) for FolderExplorer modal - Added 'use memo' directive for React compiler optimization ## Technical Details - When editing name fields, ESC key now cancels editing without closing the parent modal/drawer - After editing completes (either by confirmation or cancellation), focus returns to the text element with proper tabIndex - This ensures ESC key can properly close modals when not in editing mode - All editable name components now have consistent keyboard interaction behavior ## Testing - Test editing names in session detail drawer - ESC should cancel editing without closing drawer - Test editing names in folder explorer modal - ESC should cancel editing without closing modal - After editing, ESC should properly close the modal/drawer - Verify focus management works correctly when switching between editing and view modes [FR-1572]: https://lablup.atlassian.net/browse/FR-1572?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

github-actions bot assigned yomybaby Oct 21, 2025

github-actions bot added the size:M 30~100 LoC label Oct 21, 2025

yomybaby requested a review from ironAiken2 October 21, 2025 03:18

yomybaby requested a review from agatha197 October 21, 2025 03:18

yomybaby marked this pull request as ready for review October 21, 2025 03:19

Copilot AI review requested due to automatic review settings October 21, 2025 03:19

Copilot AI reviewed Oct 21, 2025

View reviewed changes

agatha197 requested changes Oct 21, 2025

View reviewed changes

ironAiken2 requested changes Oct 22, 2025

View reviewed changes

react/src/components/ComputeSessionNodeItems/EditableSessionName.tsx Show resolved Hide resolved

react/src/components/ComputeSessionNodeItems/EditableSessionName.tsx Show resolved Hide resolved

yomybaby force-pushed the feat/FR-1572-improve-keyboard-focus-management-editable-names branch from a07c6df to 8d91a94 Compare October 27, 2025 09:12

agatha197 approved these changes Oct 27, 2025

View reviewed changes

yomybaby requested review from agatha197 and ironAiken2 October 27, 2025 09:22

yomybaby mentioned this pull request Oct 28, 2025

chore: change temp directory path of serve-release.sh #4455

Merged

ironAiken2 approved these changes Oct 28, 2025

View reviewed changes

agatha197 approved these changes Oct 28, 2025

View reviewed changes

graphite-app bot force-pushed the feat/FR-1572-improve-keyboard-focus-management-editable-names branch from dac6de8 to f4e515a Compare October 28, 2025 04:17

graphite-app bot merged commit f4e515a into main Oct 28, 2025
11 checks passed

graphite-app bot deleted the feat/FR-1572-improve-keyboard-focus-management-editable-names branch October 28, 2025 04:19

github-pages bot temporarily deployed to github-pages October 28, 2025 04:19 Inactive

vercel bot deployed to Production October 28, 2025 04:30 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(FR-1572): improve keyboard interaction and focus management for editable name components #4421

feat(FR-1572): improve keyboard interaction and focus management for editable name components #4421

yomybaby commented Oct 21, 2025 •

edited by atlassian bot

Loading

Uh oh!

yomybaby commented Oct 21, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 21, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 21, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

agatha197 left a comment

Uh oh!

ironAiken2 left a comment

Uh oh!

Uh oh!

Uh oh!

agatha197 left a comment

Uh oh!

ironAiken2 left a comment

Uh oh!

agatha197 left a comment

Uh oh!

graphite-app bot commented Oct 28, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

feat(FR-1572): improve keyboard interaction and focus management for editable name components #4421

feat(FR-1572): improve keyboard interaction and focus management for editable name components #4421

Conversation

yomybaby commented Oct 21, 2025 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Technical Details

Testing

Uh oh!

yomybaby commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

github-actions bot commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./packages/backend.ai-ui

Test suite run success

Uh oh!

github-actions bot commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./react

Test suite run success

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

agatha197 left a comment

Choose a reason for hiding this comment

Uh oh!

ironAiken2 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

agatha197 left a comment

Choose a reason for hiding this comment

Uh oh!

ironAiken2 left a comment

Choose a reason for hiding this comment

Uh oh!

agatha197 left a comment

Choose a reason for hiding this comment

Uh oh!

graphite-app bot commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yomybaby commented Oct 21, 2025 •

edited by atlassian bot

Loading

yomybaby commented Oct 21, 2025 •

edited

Loading

github-actions bot commented Oct 21, 2025 •

edited

Loading

Coverage report for `./packages/backend.ai-ui`

github-actions bot commented Oct 21, 2025 •

edited

Loading

Coverage report for `./react`

graphite-app bot commented Oct 28, 2025 •

edited

Loading